import { defineComponent, ref, watch, onMounted, nextTick, getCurrentInstance, computed, toRefs, reactive, toRaw } from 'vue'
import { ElTable, ElTableColumn, ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon, ElImage, ElTag } from 'element-plus'
import { tableColumnConfig, tableAttrsConfig } from './config'
import { actionBarFn, dateFormatting } from './config/actionBar.jsx'

export default defineComponent({
	props: {
		// table 头
		TableHead: {
			type: Array,
			default: [],
			required: true
		},
		// table 数据
		TableData: {
			type: Array,
			default: [],
			required: true
		},
		// table 属性
		TableAttrs: {
			type: Object,
			default: {
				size: 'large',
				align: 'center',
			},
		},
		// table 配置数据
		TableConfig: {
			type: Object,
			default: {}
		},
		// table 加载
		Loading: {
			type: Boolean,
			default: false
		},
	},
	setup(props, { slots, emit, expose }) {
		const {TableData, Loading, TableHead, TableAttrs} = toRefs(props)

		const tableRef = ref()
		const tableAttrs = TableAttrs.value
		// 选中的行数据
		const multipleSelection = ref([])

		const isMultiple = ref(null)
		// 插槽前缀
		const PRE_SLOT_STR = "slot:";
		onMounted(() => {
			tableAttrsDefaultConfig();
		})
		// 操作拦
		const handleColumnSlot = (currentColAttrs, row) => {
			if(!currentColAttrs.hasOwnProperty('type')) return
			if(currentColAttrs.type === 'actionBar') {
				return actionBarFn(currentColAttrs.data, row, emit)
			}
			if(currentColAttrs.type.split(':')[0] === 'date') {
				return dateFormatting(currentColAttrs, row, currentColAttrs.type.split(':')[1])
			}
		}
		const tableColumnDefaultAttrs = (tableHeads) => {
			isMultiple.value = tableHeads.find(item => item.type === 'selection')
			return tableHeads.map(item => {
				// column添加默认属性
				for(let key in tableColumnConfig) {
					if(item.hasOwnProperty(key)) continue
					item[key] = tableColumnConfig[key]
				}

				if(item.type === 'index') {
					item.width = '60'
				}
				if(item.type === 'selection') {
					item['reserve-selection'] =  true
				}
				return item
			}).filter(item => !item?.hidden)
		}
		const handleSelectionChange = (data) => {
			multipleSelection.value = data.map(item => toRaw(item))
			emit('handleSelectionChange', data.map(item => toRaw(item)))
		}
		const handleSelect = (selection, row) => {
			emit('handleSelect', { selection, row })
		}
		const tableAttrsDefaultConfig = () => {
			for (let key in tableAttrsConfig) {
				if(tableAttrs.hasOwnProperty(key)) continue
				tableAttrs[key] = tableAttrsConfig[key]
			}
		}
		/**
		 * 当table为多选时点击行选中复选框
		 * @param row
		 */
		const handleRowClick = (row) => {
			if(!isMultiple) return
			tableRef.value.toggleRowSelection(row)
		}

		
		/**
		 * 当table为多选时变为鼠标手
		 * @param row
		 * @param column
		 * @param cell
		 */
		const handleTableMouseEnter = (row, column, cell) => {
			if(isMultiple.value) {
				cell.style.cursor = 'pointer'
			}
		}
		expose({
			tableRef,
			multipleSelection
		})
		return () => (
			<ElTable
				ref={tableRef}
				stripe={true}
				data={TableData.value}
				v-loading={Loading.value}
				{...tableAttrs}
				onRowClick={handleRowClick}
				onSelection-change={handleSelectionChange}
				onSelect={handleSelect}
				onCell-mouse-enter={handleTableMouseEnter}
			>
				{
					tableColumnDefaultAttrs(TableHead.value).map(item => {
						if(item.hasOwnProperty('type') && item?.type.startsWith(PRE_SLOT_STR)) {
							const slotName = item.type.substring(PRE_SLOT_STR.length);
							return (
								<ElTableColumn
									{...item}
									v-slots={{
										default: ({row, column, $index}) => slots[slotName]?.({row, column: {...item, ...column}, index: $index})
									}}
								/>
							)
						}else {
							return (
								<ElTableColumn {...item} v-slots={{
									default: (scope) => handleColumnSlot(item, scope.row)
								}} />
							)
						}
					})
				}
			</ElTable>
		)
	}
})
